<!-- subpkg_medicine/payment/index.vue -->
<script setup>
	import { ref } from 'vue'
	import { getAddressListAPI } from '@/apis/address'
	import { createOrderAPI, getPreOrderAPI } from '@/apis/medicine'
	import { payAPI } from '../../apis/consult'
	// 保存地址信息列表
	const addressInfo = ref([])
	// 获取地址信息
	const getAddressList = async () => {
		const res = await getAddressListAPI()
		// console.log(res)
		addressInfo.value = res.data
	}

	const query = defineProps({
		id: String
	})

	// 获取药品预支付信息
	const preOrderInfo = ref({})
	const getPreOrder = async () => {
		const res = await getPreOrderAPI(query.id)
		// console.log(res)
		preOrderInfo.value = res.data
	}

	getAddressList()
	getPreOrder()

	function isNotEmptyObject(obj) {
		return Object.keys(obj).length > 0
	}

	const paymentRef = ref(null)

	// 关闭支付渠道弹层
	function onPaymentClose() {}

	const paymentMethod = ref(1)

	// 保存付款方式
	const onChoosePayment = (val) => {
		paymentMethod.value = val.paymentMethod
	}

	// 支付渠道确认支付
	async function onPaymentConfirm() {
		const { data } = await payAPI({
			orderId: orderId.value,
			paymentMethod: paymentMethod.value,
			payCallback: 'http://localhost:5174/#/subpkg_medicine/pay_result/index'
		})
		// console.log(data)
		window.location.href = data.payUrl
	}
	// 待支付订单ID
	const orderId = ref('')
	// 选择支付渠道
	async function onPaymentButtonClick() {
		const res = await createOrderAPI(query.id, addressInfo.value[0].id)
		// console.log(res)
		orderId.value = res.data.id
		paymentRef.value.popupOpen()
	}
</script>

<template>
	<scroll-page background-color="#f6f6f6">
		<view
			class="medicine-page"
			v-if="isNotEmptyObject(preOrderInfo) && isNotEmptyObject(addressInfo)"
		>
			<view class="page-header">
				<view
					class="order-shippment"
					v-for="item in addressInfo"
					:key="item.id"
				>
					<view class="region">
						<uni-icons size="16" color="#FF7702" type="location-filled" />
						{{ item.province }} {{ item.city }} {{ item.county }}
					</view>
					<view class="detail">{{ item.addressDetail }}</view>
					<view class="receiver">{{ item.receiver }} {{ item.mobile }}</view>
				</view>
			</view>

			<view class="order-shop">
				优医药房
				<text class="alt">优医质保 假一赔十</text>
			</view>
			<!-- 药品列表 -->
			<view class="medicine-list">
				<view
					v-for="medicine in preOrderInfo.medicines"
					:key="medicine.id"
					class="medicine-list-item"
				>
					<image
						class="medicine-cover"
						:src="medicine.avatar"
						mode="aspectFill"
					/>
					<view class="medicine-info">
						<text class="name">{{ medicine.name }}</text>
						<text
							:class="{ symbol: medicine.prescriptionFlag === 1 }"
							class="symbol"
						>
							{{ medicine.specs }}
						</text>
						<text class="price">¥{{ medicine.amount }}</text>
					</view>
					<view class="quantity">x{{ medicine.quantity }}</view>
					<view class="guide">用法用量：{{ medicine.usageDosag }}</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-info">
				<uni-list :border="false">
					<uni-list-item
						title="药品金额"
						:right-text="'¥' + preOrderInfo.payment"
					/>
					<uni-list-item
						title="运费"
						:right-text="'¥' + preOrderInfo.expressFee"
					/>
					<uni-list-item
						title="优惠券"
						show-arrow
						:right-text="'-¥' + preOrderInfo.couponDeduction"
					/>
					<uni-list-item
						title="实付款"
						:right-text="'¥' + preOrderInfo.actualPayment"
					/>
				</uni-list>
			</view>

			<!-- 底部 -->
			<!-- 底部 -->
			<view class="toolbar">
				<view class="total-amount">
					需付款: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
				</view>
				<view class="buttons">
					<button class="uni-button" @click="onPaymentButtonClick">
						立即支付
					</button>
				</view>
			</view>
		</view>
	</scroll-page>

	<!-- 支付渠道 -->
	<custom-payment
		@close="onPaymentClose"
		@confirm="onPaymentConfirm"
		:amount="preOrderInfo.actualPayment"
		:order-id="query.id"
		@choosePayment="onChoosePayment"
		ref="paymentRef"
	/>
</template>

<style lang="scss">
	@import './index.scss';
</style>
